<template>
    <el-dialog title="面积配置" :visible.sync="isDial" width="450px">
        <el-table :data="gridData" border size='mini'>
            <el-table-column property="areaText" label="面积范围"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="delArge(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="text" size="small" @click="addArge('add')">添加面积段</el-button>
    </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            gridData: [],
            isDial: false,
        }
    },
    created(){
        this.$root.$on('areaAllocation',data=>{
            // console.log('aaaaaa')
            this.isDial=true
            this.selectList()
        })
    },
    methods:{
        addArge(row){
            this.$root.$emit('addArge',row)
        },
        delArge(row){
            let that=this 
            request.delAlert({
                name:'删除该面积段',
                that,
                fn(obj){
                    let url='build/area/'+row.id+'?greenToken='+request.greenToken
                    request.ajaxDel({
                    url,
                    that,
                    fn(res){
                            that.$message(obj)
                            that.selectList()
                        }
                    })
                }
            })
        },
        selectList(){
            let that=this
            let url='build/area'
            request.ajaxGet({
                url,
                that,
                fn(res){
                    // console.log(res.list)
                    that.gridData=res.list
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
